<template>
  <NuxtLayout>
    <div class="login-box">
      <div class="main-box">
        <div class="login-top">&nbsp;</div>
        <div class="login-main">
          <img src="https://static.dzyxzx.cn/jkbpc%2Flogimg.png" alt="">
          <div class="title">
            <p>技考邦</p>
            <p class="title-p">一站式技考学习平台</p>
          </div>
          <el-tabs v-model="setpwdTabValue" stretch>
            <el-tab-pane label="修改密码" name="1" v-if="isUser">
              <div class="sms-log">
                <el-input v-model="saveForm.phoneCode" placeholder="请输入验证码" autocomplete="off">
                  <template #append>
                    <el-button id="btn" :disabled="isShow" @click="sendCode">{{ downTimeText }}</el-button>
                  </template>
                </el-input>
                <el-input v-model="saveForm.password" type="password" placeholder="请输入新密码" autocomplete="off" />
                <el-button type="primary" :disabled="subDisabled" @click="onSaveFn" style="width: 360px; height: 48px;">确定</el-button>
                <div class="read">&nbsp;</div>
                <el-form>&nbsp;</el-form>
              </div>
            </el-tab-pane>
            <el-tab-pane label="设置密码" name="1" v-else>
              <div class="sms-log">
                <el-input v-model="setInfo.psw" type="password" placeholder="设置密码" autocomplete="off" />
                <el-input v-model="setInfo.repeat" type="password" placeholder="确认密码" autocomplete="off" />
                <el-button type="primary" :disabled="subDisabled" style="width: 360px; height: 48px;" @click="onSubmit">确定</el-button>
                <div class="read">&nbsp;</div>
                <el-form>&nbsp;</el-form>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </NuxtLayout>
</template>

<script setup>
import { getPhoneCodeApi, updatePasswordApi, revisePasswordApi, loginOutApi } from '~/server/api.js'
import { useToken } from '~/store/token';
definePageMeta({ layout: false })
// TDK
const prevHost = useRequestHeaders()["x-forwarded-proto"];
const host = useRequestHeaders()["host"];
const fullPath = useRoute()["fullPath"];
const isUser = ref(useRoute().meta.userinfo ? true : false)
useSeoMeta({
  title: `技考邦_${isUser.value ? '修改密码' : '设置密码'}`,
  keywords: isUser.value ? '修改密码' : '设置密码',
  description: `技考邦，${isUser.value ? '修改密码' : '设置密码'}`,
  ogTitle: `技考邦_${isUser.value ? '修改密码' : '设置密码'}`,
  ogDescription: `技考邦，${isUser.value ? '修改密码' : '设置密码'}`,
  ogType: "article",
  ogUrl: `${prevHost}://${host}${fullPath}`,
})
const setpwdTabValue = ref('1')
const setInfo = reactive({
  phone: '',
  psw: '',
  repeat: '',
})
let downTime = 60;
const downTimeText = ref('获取验证码')
const isShow = ref(false)
const saveForm = reactive({
  phoneNo: useRoute().meta.userinfo ? useRoute().meta.userinfo.phoneNo : '',
  phoneCode: '',
  password: ''
})
const subDisabled = ref(false)
// 获取验证码
const sendCode = () => {
  const reg = /^1[3-9]\d{9}$/
  if (!reg.test(saveForm.phoneNo)) {
    ElMessage.warning('请输入正确的手机号')
  } else {
    isShow.value = true;
    useServerRequest(getPhoneCodeApi, {
      method: 'get',
      params: { phone: saveForm.phoneNo }
    }).then(res => {
      if (res.errno === 0) {
        //按钮倒计时
        var remainTime = downTime;
        downTimeText.value = `重新获取${remainTime}s`
        let timer = setInterval(() => {
          remainTime = remainTime - 1;
          downTimeText.value = `重新获取${remainTime}s`;
          if (remainTime < 1) {
            clearInterval(timer)
            remainTime = downTime;
            downTimeText.value = '获取验证码';
            isShow.value = false;
            return false
          }
        }, 1000)
        return false;
      }
      isShow.value = false;
    }).catch(() => {
      isShow.value = false;
    })
  }
}
// 确认
const onSubmit = () => {
  if (!setInfo.psw || !setInfo.repeat) {
    ElMessage.warning('请完善密码信息')
    return false
  }
  if (setInfo.psw !== setInfo.repeat) {
    ElMessage.warning('密码不一致，请重新填写')
    return false
  }
  subDisabled.value = true;
  useServerRequest(updatePasswordApi, {
    method: 'post',
    body: JSON.stringify({
      password: setInfo.psw
    })
  }).then((res) => {
    if (res.errno === 0) {
      window.location.href = '/userCenter/IdIdent'
      ElMessage({
        message: '设置密码成功，请完善身份认证',
        type: 'success'
      })
      return false
    }
    subDisabled.value = false;
  }).catch(() => {
    subDisabled.value = false;
  })
}
// 确认修改
const onSaveFn = () => {
  if (!/^1[3456789]\d{9}$/.test(saveForm.phoneNo)) {
    ElMessage.warning('手机号有误')
    return false
  }
  if (saveForm.phoneCode == '') {
    ElMessage.warning('验证码有误')
    return false
  }
  subDisabled.value = true;
  useServerRequest(revisePasswordApi, {
    method: 'post',
    body: JSON.stringify(saveForm)
  }).then(({ errno, errmsg, result }) => {
    if (errno === 0) {
      useToken().token = '';
      ElMessageBox.confirm('修改成功，请重新登录账号', '系统提示', {
        showClose: false,
        showCancelButton: false,
        closeOnPressEscape: false,
        closeOnClickModal: false
      }).then(() => {
        useServerRequest(loginOutApi, {
          method: 'get'
        }).then(({ errno, errmsg, result }) => {
          setTimeout(() => {
            subDisabled.value = false;
          }, 1500)
          if (errno === 0) {
            window.location.href = '/login';
            return false;
          }
        }).catch(() => {
          subDisabled.value = false;
        })
      })
      return false
    }
    subDisabled.value = false;
  }).catch(() => {
    subDisabled.value = false;
  })
}
</script>

<style lang="less">
.login-box {
  display: flex;
  justify-content: center;
  align-content: center;
  background-color: rgba(0, 116, 252, 0.10);

  .main-box {
    width: 1065px;
    position: relative;
    height: 911px;

    .login-top {
      margin-top: 19px;
      color: #666;
      display: flex;
      justify-content: end;

      >span {
        cursor: pointer;

        &:hover {
          color: #FF3F29;
        }
      }

      >a {
        color: #666;
      }

      .shu {
        padding: 0 10px;
      }
    }

    .login-main {
      height: 560px;
      margin-top: 130px;
      background-color: #fff;
      display: block;
      position: relative;

      img {
        position: absolute;
        left: -20px;
        top: -40px;
      }

      .title {
        z-index: 99;
        position: absolute;
        width: 489px;
        color: #fff;
        font-size: 30px;
        left: 55px;

        .title-p {
          font-size: 36px;
        }
      }

      .el-tabs {
        width: 360px;
        position: relative;
        top: 80px;
        left: 580px;
      }

      .el-tabs__item {
        font-size: 20px;
        font-weight: bold;

        &:hover {
          color: #0074FC;
        }
      }

      .el-tabs__item.is-active {
        color: #0074FC;
      }

      .el-tabs__active-bar {
        height: 3px;
        color: #0074FC;
      }
    }

  }
}

.el-tabs__nav-wrap:after {
  display: none;
}

.login-box .el-tab-pane {
  width: 360px;
  height: 355px;
}

.sms-log {
  width: 360px;
  height: 355px;
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: center;

  .el-input {
    width: 360px;
    height: 48px;
  }

  >.el-button {
    background-color: #0074FC;
    font-size: 20px;
  }

  .el-input-group__append {
    background: #fff;
    border: none;
  }

  .el-input-group--append {
    .el-input__wrapper {
      // box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
      box-shadow: none;
      border: 1px solid #dcdfe6;
      border-right: none;
    }
  }

  .el-checkbox__input.is-checked {
    color: #0074FC;
  }

  .read {
    font-size: 14px;
    display: flex;
    justify-content: left;
    align-items: center;
    flex-wrap: wrap;

    >span {
      margin-top: -2px;

      a {
        color: #0074FC;
      }
    }

    >div {
      color: #999;
      margin-left: 21px;
    }
  }
}

.el-checkbox__input {
  width: 19px;
  height: 19px;
}

.el-checkbox__inner {
  width: 19px;
  height: 19px;

  &::after {
    width: 7px;
    height: 12px;
  }
}

.el-checkbox__label {
  margin-top: 2px;
}

.scan-box {
  width: 360px;
  height: 355px;
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.img-box {
  width: 248px;
  height: 248px;
  background-color: pink;
}
</style>